<template>
  <view class="container">
    <NavBar title="选择城市"></NavBar>
	<view class="locationWrap">
		<text class="cityLabel">当前城市:</text>
		<u-input v-model="city"  placeholder="自动定位" border="bottom" inputAlign="center">
		  <text class="iconfont icon-dingwei" slot="suffix"></text>
		</u-input>
	</view>
    <view class="hotCity">
      <text
        class="item"
        v-for="item in hotCity"
        :key="item.id"
        @click="clickHotCity(item.name)"
      >{{item.name}}</text>
    </view>
    <view class="scrollWrap">
      <scroll-view class="scrollList" 
          scroll-y 
          :scroll-into-view="letter">
        <CityList
          v-for="(item,key) in cities"
          :id="key"
          :item="item"
          :keys="key"
          :key="key"
          @getCity="getCity"
        ></CityList>
      </scroll-view>
    </view>
    <IndexList @letter="getLetter"></IndexList>
  </view>
</template>

<script>
import IndexList from './components/IndexList.vue'
import CityList from './components/CityList.vue'
export default {
  components: {
    IndexList,
    CityList
  },
  data () {
    return {
      city: '',
      hotCity: [],
      letter: '',
      cities: {}
    }
  },
  onReady () {
	this.getLocation()
	this.getCityList()
  },
  computed: {
    userInfo () {
      return this.$store.state.auth.userInfo
    }
  },
  methods: {
	async getCityList(){
		const {code,data} = await this.$axios.api.getCity()
		if(code === 200){
			this.hotCity = data.hotCity
			this.cities = data.cities
		}
	},
    getLocation () {
      var this_ = this
      uni.getLocation({
        type: 'gcj02',
		altitude:true,//获取高度信息
		isHighAccuracy:true, //开启高精度定位
		geocode:true,//是否解析地址信息 仅APP平台支持，需配置type gcj02
        success: function (res) {
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
		  this_.$axios.api.getLocation({
			  lat:res.latitude,
			  long:res.longitude
		  }).then(res=>{
			  this_.city = res.data.address_component.city
			  this_.userInfo.location = this_.city
			  this_.$store.commit('setUserInfo', this_.userInfo)
		  })
        }
      })
    },
    clickHotCity (name) {
      this.city = name
      this.userInfo.location = this.city
      this.$store.commit('setUserInfo', this.userInfo)
      uni.navigateBack({ delta: 1 })
    },
    getLetter (letter) {
      this.letter = letter
    },
    getCity (val) {
      this.city = val
      this.userInfo.location = this.city
      this.$store.commit('setUserInfo', this.userInfo)
      uni.navigateBack({ delta: 1 })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	.locationWrap{
		width: 50%;
		height: 100rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}
	.hotCity {
		height: 200rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: flex-start;
		align-items: center;
		.item {
		  width: 100rpx;
		  height: 60rpx;
		  line-height: 60rpx;
		  text-align: center;
		  border-radius: 10rpx;
		  font-size: 24rpx;
		  color: $u-success;
		  border: 1px solid $u-success;
		  margin-right: 20rpx;
		}
	}
	.scrollWrap {
		flex: 1;
		overflow: hidden;
		.scrollList {
			height: 100%;
			.list-cell {
				display: flex;
				box-sizing: border-box;
				width: 100%;
				padding: 10px 24rpx;
				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 24px;
				background-color: #fff;
			}
		}
	}
}
</style>
